<template>
  <div class="main-home">
    <!-- <div style="background-color:yellow; display: flex; align-items: left: ; width:100px;flex-wrap: wrap; padding-left:30px;padding-right:30px;" ref="dzRef">
        1912年10月，清华学堂更名为清华学校（Tsinghua college），归北京政府外交部管辖
      </div> -->
    <!-- <Test ref="testRef" a="1" b="2" :test="123">
            Fuck Vue3
            <template v-slot:before>
                before 
            </template>
</Test>
<div>Main - flag - {{ flag }}</div>
<button @click="flag = !flag">修改 flag</button>

<Dialog v-model="flag" v-model:title="title"></Dialog> -->
    <MyInput v-model="title"> </MyInput>
    <div>{{ testRef }}</div>
    <canvas id="main" class="main" ref="main"></canvas>

    <!-- <div>
      <component   :is="selectBar"></component>
    </div> -->
<selectBar></selectBar>
<component   :is="selectBar"></component>

    <!-- <SelectBar/> -->
  </div>

</template>
<script lang="ts" setup>
import { ref, Ref, onMounted } from 'vue';

import MyInput from '@/components/MyInput.vue'

import Dialog from '@/components/Dialog.vue';

import SelectBar from '@/components/SelectBar.vue';

import Test from '@/components/Test.tsx';

import { createSlideInText } from '@/untils/slide-in-text'

const title = ref('soup')
defineExpose({
  title

})
const active = ref("chat");

const selectBar = ref(SelectBar)

const testRef = ref<any>({
  name: 'eee'
});
setTimeout(() => {
  testRef.value.name = 'bbb';
}, 2000)

const dzRef: Ref<HTMLElement | null> = ref(null);
const flag = ref<Boolean>(true)
// createSlideInText(dzRef,16*1000 - 1000,'left')

const main = ref<HTMLCanvasElement>()
const drawCanvas = () => {
  if (!main.value) return;

  const canvas = main.value;

  // 设置canvas的宽高
  canvas.width = 600;
  canvas.height = 300;

  // 获取Canvas绘制2D环境
  const ctx = canvas.getContext("2d");
  if (!ctx) return console.error("无法获取CanvasRenderingContext2D");

  /**
   * 在页面中画一个canvas，然后在居中位置写上蓝色'Hello Canvas'，并加上文字描边
   * @type {HTMLElement}
   */

  const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
  //设置字体格式
  context!.font = '38pt Arial';
  //fillStyle设置或返回填充canvas的颜色、渐变、模式，其中CornflowerBlue 矢车菊蓝
  context!.fillStyle = 'cornflowerblue';
  //strokeStyle用于设置或返回笔触的颜色、渐变、模式
  context!.strokeStyle = 'blue';
  //设置文字的内容和位置
  context!.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);
  context!.strokeText("Hello Canvas", canvas.width / 2 - 150, canvas.height / 2 + 15);



}

onMounted(() => {
  drawCanvas()
})


const options = ref([{
  value: '0',
  name: '全部任务'
}, {
  value: '5',
  name: '延期任务'
}, {
  value: '4',
  name: '预警任务'
}, {
  value: '1',
  name: '未开始任务'
}, {
  value: '3',
  name: '进行中任务'
}, {
  value: '2',
  name: '已完成任务'
}])
const selValue = ref("")

function getValue(val: any) {

  console.log(val)
}


</script>
<style lang="scss" scoped>
.van-tabs {
  top: 0;
}

.main {
  width: 100px;
  height: 100px;
}

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color
}

@mixin padcolor {
  padding: 20px 10px;
  background-color: yellow;
}

.main-home {

  // @include bordered(red, 2px);
  // @include padcolor;



}

@keyframes slide-from-bottom {
  0% {
    top: 5px;
    opacity: 0;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}

.slide-from-bottom {
  position: relative;
  animation: slide-from-bottom 0.3s;
}
</style>